<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="security"
           uri="http://www.springframework.org/security/tags" %>
<html>
<head>
    <title>Work page</title>

    <script type="text/javascript" src="../../resources/js/jquery-1.6.js"></script>
    <script src="../../resources/js/grid.locale-ru.js" type="text/javascript"></script>
    <script src="../../resources/js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script src="../../resources/js/fancybox/jquery.fancybox-1.3.4.js"></script>

    <link rel="stylesheet" type="text/css" media="screen" href="../../resources/js/fancybox/jquery.fancybox-1.3.4.css"/>
   <link rel="stylesheet" type="text/css" media="screen" href="../../resources/css/start/jquery-ui-1.8.10.custom.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="../../resources/themes/start/ui.jqgrid.css"/>
    <style type="text/css">
        body {
            font: 8px Arial;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function() {

            $("#edAbout").fancybox({
                        'width'             : '75%',
                        'height'            : '90%',
                        'autoScale'         : false,
                        'transitionIn'      : 'none',
                        'transitionOut'     : 'none',
                        'type'              : 'iframe'
                    });

            var imageFormatter = function(cellvalue, options, rowObject) {
                //return "<img src='/worker/getImage?email=" + $(rowObject).attr('email'); + "'/>";
                return "<img height=100 src='/worker/getImage?email=" + cellvalue + "'/>";
            };

            var grid = jQuery("#subscribedWorkersTable").jqGrid({
                        url:'/data/subscribedWorkersData?idWork=${work.idWork}',
                        datatype: 'json',
                        mtype: 'GET',
                        colNames:['№', 'Фото', 'Email', 'Город', 'Имя', 'Фамилия', 'О себе'],
                        colModel:[
                            {name:'idWorker',index:'idWorker', width:55,editable:false,editoptions:{readonly:true,size:10},hidden:true},
                            {name:'image',index:'image', width:50,editable:true, editrules:{required:true}, editoptions:{size:10},formatter: imageFormatter},
                            {name:'email',index:'email', width:50,editable:true, editrules:{required:true}, editoptions:{size:10}},
                            {name:'city',index:'city', width:50,editable:true, editrules:{required:true}, editoptions:{size:10}},
                            {name:'firstName',index:'firstName', width:50,editable:true, editrules:{required:true}, editoptions:{size:10}},
                            {name:'lastName',index:'lastName', width:50,editable:true, editrules:{required:true}, editoptions:{size:10}},
                            {name:'about',index:'about', width:50,editable:true, editrules:{required:true}, editoptions:{size:10}}
                        ],
                        postData: {
                        },
                        rowNum:20,
                        rowList:[5,10,20],
                        height: 200,
                        autowidth: true,
                        rownumbers: true,
                        pager: '#pager',
                        sortname: 'id',
                        jsonReader:{
                            root: "rows",
                            page: "page",
                            total: "total",
                            records: "records",
                            repeatitems: false,
                            id: "0"
                        },
                        viewrecords: true,
                        sortorder: "asc",
                        caption:"Подписанные работники",
                        emptyrecords: "Пусто",
                        loadonce: false,
                        gridComplete: function() {
                            $('.jqgrow').click(function(e) {
                                window.location = "/workers/" + e.currentTarget.id;
                            });
                        },
                        loadComplete: function() {
                        }
                    });
        });

        function closeIframe() {
            $('#fancybox-wrap').hide('slow').remove();
            $('#fancybox-overlay').hide('slow').remove();
            // todo JS function which inserts right values to the work information table
            window.location.reload();
        }
        ;

        function subscribe() {
            $.getJSON('/works/${work.idWork}/subscribe', {}, function(data) {
                if (!data.isOk) {
                    alert("Sorry, some error has occured...(");
                } else {
                    alert("Подписка на данную работу включена");
                    window.location.reload();
                }
            });
        }

        function unsubscribe() {
            $.getJSON('/works/${work.idWork}/unsubscribe', {idWork:${work.idWork}}, function(data) {
                if (!data.isOk) {
                    alert("Sorry, some error has occured...(");
                } else {
                    alert("Подписка на данную работу отменена");
                    window.location.reload();
                }
            });
        }

        function editAbout() {
            $("#edAbout").click();
        }
    </script>
</head>
<body>
<div style="font: 12px Arial;">
<table>
    <tr>
        <td>
            Страна
        </td>
        <td>
            ${work.city.country.ruName}
        </td>
    </tr>
    <tr>
        <td>
            Регион
        </td>
        <td>
            ${work.city.region.ruName}
        </td>
    </tr>
    <tr>
        <td>
            Город
        </td>
        <td>
            ${work.city.ruName}
        </td>
    </tr>
    <tr>
        <td>
            Тип работы
        </td>
        <td>
            ${work.jobType.title}
        </td>
    </tr>
    <tr>
        <td>
            О работе
        </td>
        <td>
            ${work.about}
        </td>
    </tr>
    <tr>
        <td>
            Зарплата
        </td>
        <td>
            ${work.wage} грн
        </td>
    </tr>
    <tr>
        <td>
            Работодатель
        </td>
        <td>
            <a href="/employers/${work.employer.idUser}">${work.employer.firstName} ${work.employer.lastName}</a>
        </td>
    </tr>
    <tr>
        <td>
            Рабочее время
        </td>
        <td>
            <table>
                <c:forEach var="workDay" items="${work.schedule}">
                    <tr>
                        <td>${workDay.workDate}</td>
                        <td>${workDay.startTime}</td>
                        <td>${workDay.endTime}</td>
                    </tr>
                </c:forEach>
            </table>
        </td>
    </tr>

    <security:authorize ifAllGranted="ROLE_WORKER">
        <tr>
            <td>
                <c:choose>
                    <c:when test="${isSubscribed}">
                        <input type="button" value="Отказаться от подписки" onclick="unsubscribe()"/>
                    </c:when>
                    <c:otherwise>
                        <input type="button" value="Подписаться" onclick="subscribe()"/>
                    </c:otherwise>

                </c:choose>

            </td>
        </tr>
    </security:authorize>         
</table>
</div>
<div>
        <div>
            <table id="subscribedWorkersTable">
            </table>
            <div id="pager" class="scroll" style="text-align:center;"></div>
        </div>
</div>
</body>
</html>